<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
  import ThemePicker from "@/components/ThemePicker";

  export default {
    name: "App",
    components: {
      ThemePicker
    },
    metaInfo() {
      return {
        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
        titleTemplate: title => {
          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
        }
      }
    }
  };
</script>
<style>
  .el-upload-list--picture-card .el-upload-list__item {
    border: none !important;
  }

  .info_window {
    width: 320px;
    border-radius: 1px;
    padding: 0 10px;
    text-align: left;
    z-index: 9999999;
  }

  .info_window_top {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #405668;
  }

  .info_window_top .people_type {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
  }

  .info_window_top .people_type img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .info_window_top .ic_close {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .info_window_content {
    color: #333;
    font-size: 16px;
    line-height: 30px;
    padding: 18px 0;

  }
  .info_window_content_item{
    display: flex;
    justify-content: space-between;
  }
  .info_window_content .avatar {
    width: 70px;
    height: 70px;
    margin-right: 15px;
  }

  .info_window_content .people_name {
    font-size: 16px;
  }

  .people_info {
    width: max-content;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 12px;
    color: #06FFFE;
    border: 1px solid #70f3ff;
    border-radius: 27px;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
  }

  .people_info:hover {
    box-shadow: 0 0 5px rgba(112, 243, 255, 1);
  }

  .people_info .type {
    height: 100%;
    margin-right: 3px;
  }

  .people_info .sharp {
    position: absolute;
  }

  .info_window .video {
    width: 100%;
    height: 160px
  }

  .el-breadcrumb__separator {
    color: #fff !important;
  }

  .app-breadcrumb.el-breadcrumb .no-redirect {
    color: #fff !important;
  }

  .el-breadcrumb__inner,
  .el-breadcrumb__inner a {
    font-weight: 600 !important;
    font-size: 18px;
    color: #fff !important;
  }

  .el-menu-item.is-active {
    font-size: 18px;
    color: #fff !important;
    background-color: #25349f !important !important;
  }

  .navbar .right-menu .right-menu-item {
    color: #fff !important;
  }

  .router-link-exact-active .router-link-active>.el-menu-item .is-active {
    background-color: #25349f !important;
  }

  #app .sidebar-container .theme-dark .nest-menu .el-submenu>.el-submenu__title,
  #app .sidebar-container .theme-dark .el-submenu .el-menu-item .el-menu-item {
    font-size: 18px !important;
  }

  #app .sidebar-container .el-menu-item,
  #app .sidebar-container .el-submenu__title {
    font-size: 18px !important;
  }

  /* .el-tabs__item{
  font-size: 20px!important;
} */
</style>
<style scoped>
  .el-breadcrumb__separator {
    color: #fff !important;
  }

  #app .theme-picker {
    display: none;
  }
</style>
